<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>task05 零基础HTML及CSS编码（二）</title>
    <!--     <link rel="stylesheet" type="text/css" href="common/normalize.css"> -->
    <style type="text/css">
    * {
        margin: 0;
        padding: 0;
        font-family: "Microsoft Yahei";
    }
    
    body {
        background-color: #DEDEDE;
    }
    
    ol {
        padding: 10px 0 0 53px;
    }
    
    ul {
        margin-left: 10px;
    }
    
    ul li {
        list-style: none;
    }
    
    table {
        margin-left: 10px;
        width: 100%;
    }
    
    th {
        background-color: #333333;
        color: white;
    }
    
    tbody td {
        border: 1px solid #CCCCCC;
    }
    
    tfoot tr:last-child {
        background-color: #CCCCCC;
        color: #333;
    }
    
    .header,
    .footer {
        position: relative;
        background-color: #333;
    }
    
    .footer {
        text-align: center;
        height: 50px;
        line-height: 50px;
        color: white;
        bottom: 0;
        clear: both;
    }
    
    .header h1 {
        color: white;
    }
    
    .main {
        margin-right: 380px;
    }
    
    .nav-links {
        position: absolute;
        right: 2%;
        top: 30%;
    }
    
    .nav-links li {
        display: inline;
    }
    
    .nav-links a {
        text-decoration: none;
    }
    
    .nav-links a:link {
        color: white;
    }
    
    .nav-links a:visited {
        color: #A6A4A9;
    }
    
    .nav-links a:hover,
    .nav-links a:active {
        color: white;
    }
    
    .article {
        margin: 25px;
        padding: 25px;
        box-shadow: 10px 10px 5px #888888;
        background-color: white;
    }
    
    .article h2,
    .article h3,
    .article span,
    .article p {
        padding: 10px;
    }
    
    .article h3 {
        color: #706B71;
        font-size: 1rem;
    }
    
    .article span {
        color: #939393;
        font-size: .8rem;
    }
    
    .img {
        display: inline-block;
        border: 1px solid #eee;
        padding: 10px;
    }
    
    .right-table {
        font-size: .8rem;
    }
    
    .h3-title {
        border-left: 4px solid #eee;
    }
    
    .right-table ul {
        margin-left: -10px;
    }
    
    .right-table li {
        padding-top: 10px;
    }
    
    .right-table li label,
    h5 {
        display: inline-block;
        width: 110px;
        text-align: right;
    }
    
    .right-table .uniqe {
        width: 20px;
    }
    
    .confirm-btn {
        display: block;
        background-color: #3355D0;
        color: white;
        width: 100%;
        height: 40px;
        line-height: 40px;
        border-radius: 15px;
    }
    
    .hint {
        display: block;
        margin-left: 33.5%;
    }
    
    .aside {
        position: absolute;
        width: 300px;
        top: 42px;
        right: -5px;
    }
    </style>
</head>

<body>
    <div class="header">
        <h1>Code matters</h1>
        <ul class="nav-links">
            <li><a href="#">导航链接一</a></li>
            <li><a href="#">导航链接二</a></li>
            <li><a href="#">导航链接三</a></li>
            <li><a href="#">导航链接四</a></li>
        </ul>
    </div>
    <div class="main">
        <div class="article">
            <h2>文章一级标题</h2>
            <h3>文章二级标题</h3>
            <span>文章作者</span>
            <span>文章发表时间</span>
            <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，还行了
                <br>这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，<a href="http://ife.baidu.com">这里有一个链接到http://ife.baidu.com</a>这是一个很长很长的段落，这是一个很长很长的段落，<strong>这里有个粗体字</strong>这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落。</p>
            <p><img src="img/logo.png" alt="logo"></p>
            <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，还行了
                <br>这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，<a href="http://ife.baidu.com" target="_blank">这里有一个链接点击后打开新窗口链接到http://ife.baidu.com</a>这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，<strong>这里有个粗体字</strong>这是一个很长很长的段落，这是一个很长很长的段落。</p>
        </div>
        <div class="article">
            <h2>另外一篇文章一级标题</h2>
            <h3>文章二级标题</h3>
            <span>文章作者</span>
            <span>文章发表时间</span>
            <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，还行了
                <br>这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，<a href="http://ife.baidu.com">这里有一个链接到http://ife.baidu.com</a>这是一个很长很长的段落，这是一个很长很长的段落，<strong>这里有个粗体字</strong>这是一个很长很长的段落，这是一个很长很长的段落。
                <br><img src="img/logo.png" alt="logo">
                <br>
            </p>
            <ul>
                <li>列表项目一</li>
                <li>列表项目二</li>
                <li>列表项目三</li>
            </ul>
        </div>
        <div class="article">
            <h3>图片</h3>
            <div class="img">
                <p>好看的图片</p>
                <img src="img/logo.png" alt="logo">
            </div>
            <div class="img">
                <p>好看的图片</p>
                <img src="img/logo.png" alt="logo">
            </div>
            <div class="img">
                <p>好看的图片</p>
                <img src="img/logo.png" alt="logo">
            </div>
            <div class="img">
                <p>好看的图片</p>
                <img src="img/logo.png" alt="logo">
            </div>
            <div class="img">
                <p>好看的图片</p>
                <img src="img/logo.png" alt="logo">
            </div>
            <div class="img">
                <p>好看的图片</p>
                <img src="img/logo.png" alt="logo">
            </div>
            <div class="img">
                <p>好看的图片</p>
                <img src="img/logo.png" alt="logo">
            </div>
            <div class="img">
                <p>好看的图片</p>
                <img src="img/logo.png" alt="logo">
            </div>
        </div>
        <div class="article">
            <h2>最后一篇文章一级标题</h2>
            <h3>文章二级标题</h3>
            <span>文章作者</span>
            <span>文章发表时间</span>
            <ol>
                <li>排名1</li>
                <li>排名2</li>
                <li>排名3</li>
            </ol>
            <p>下面是一个表格，给表格加了一个border="1"好让你看出来是一个表格</p>
            <table>
                <thead>
                    <tr>
                        <th>表头</th>
                        <th>表头</th>
                        <th>表头</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>表内容单元格</td>
                        <td>表内容单元格</td>
                        <td><a href="#">操作</a></td>
                    </tr>
                    <tr>
                        <td>表内容单元格</td>
                        <td>表内容单元格</td>
                        <td><a href="#">操作</a></td>
                    </tr>
                    <tr>
                        <td>表内容单元格</td>
                        <td>表内容单元格</td>
                        <td><a href="#">操作</a></td>
                    </tr>
                    <tr>
                        <td>表内容单元格</td>
                        <td>表内容单元格</td>
                        <td><a href="#">操作</a></td>
                    </tr>
                </tbody>
                <tfoot>
                    <tr>
                        <td>总计</td>
                        <td colspan="2">1000</td>
                    </tr>
                </tfoot>
            </table>
        </div>
    </div>
    <div class="article aside">
        <h3 class="h3-title">这里以后是个侧栏，这是侧栏的标题</h3>
        <form method="post" action="#" class="right-table">
            <ul>
                <li>
                    <label for="mail_address">请输入邮箱地址</label>
                    <input type="text" id="mail_address" value="这是一个文本输入框" name="mail_address" />
                    <span class="hint">邮箱地址请按要求格式输入</span>
                </li>
                <li>
                    <label for="password">请输入密码</label>
                    <input type="password" id="password" value="这是一个文本输入框" />
                    <br>
                </li>
                <li>
                    <label for="confirm-password">请重复输入密码</label>
                    <input type="password" id="confirm-password" value="这是一个文本输入框" name="password" />
                    <span class="hint">密码请为6-16位英文数字</span>
                </li>
                <li>
                    <h5>性别</h5>
                    <input type="radio" name="sex" value="男" id="male" checked="checked" />
                    <label for="male" class="uniqe">男</label>
                    <input type="radio" name="sex" value="女" id="female" />
                    <label for="female" class="uniqe">女</label>
                </li>
                <li>
                    <h5>城市</h5>
                    <select name="cities">
                        <option>北京</option>
                        <option>长沙</option>
                        <option>娄底</option>
                        <option>怀化</option>
                    </select>
                </li>
                <li>
                    <h5>爱好</h5>
                    <input type="checkbox" />运动
                    <input type="checkbox" />艺术
                    <input type="checkbox" />科学
                </li>
                <li>
                    <h5 style="vertical-align: top;">个人描述</h5>
                    <textarea cols="25" rows="5">这是一个多行输入框，输入您的个人描述</textarea>
                </li>
            </ul>
            <input type="button" name="submit" value="确认提交" class="confirm-btn" />
        </form>
    </div>
    <div class="footer">
        <p>版权所有© made by pkjy TEAM CM</p>
    </div>
</body>

</html>
